<template>
  <div>
    <!-- 基本信息部分 -->
    <base-info :base-info="baseInfo"></base-info>
    <!--  -->
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="歌曲列表" name="first">
        <!-- 歌曲列表 -->
        <song-list :song-list="musicList" :is-album="true"></song-list>
      </el-tab-pane>
      <el-tab-pane :label="'评论(' + recommendCount + ')'" name="second">
        <!-- 评论组件 -->
        <recommend-com
          :albumid="id"
          :remcommend-list="commentsList"
          @reset="getRecommend"
        ></recommend-com>
        <el-pagination
          background
          :page-size="20"
          @current-change="pageChange"
          :current-page.sync="offset"
          :total="recommendCount"
        ></el-pagination>
      </el-tab-pane>
      <el-tab-pane label="收藏者" name="third">
        <!-- 收藏着组件 -->
        <collection-com :collection-list="collectionList"></collection-com>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import baseInfo from './childComps/base-info.vue'
import {
  _getMusicListDetail,
  baseInfoCom,
  _getAllSong,
  _getRecommends,
  _getSub
} from '../../network/detail'
import songList from '../../components/Songlist/song-list.vue'
import recommendCom from '../../components/recommend/recommend.vue'
import collectionCom from './childComps/collection.vue'
import { formatDate } from '../../utils/tool'
export default {
  components: { baseInfo, songList, recommendCom, collectionCom },
  data () {
    return {
      id: null,
      activeName: 'first',
      baseInfo: {},
      length: 0, //歌单的歌曲数量
      musicList: [],
      recommendCount: 0, //评论数
      offset: 1, //评论页码
      commentsList: [], //评论列表
      collectionList: [] //收藏者数据
    }
  },
  created () {
    this.getDetail()
  },
  activated () {
    this.getDetail()
  },
  methods: {
    handleClick () {},
    pageChange (val) {
      //分页改变
      this.offset = val
      this.getRecommend()
    },
    getRecommend () {
      // 获取评论数据
      _getRecommends(this.id, 20, (this.offset - 1) * 20).then(res => {
        console.log(res)
        this.commentsList = res.data.comments
      })
    },
    async getCollecton () {
      // 获取收藏者
      var res = await _getSub(this.id, 30)
      console.log(res)
      this.collectionList = res.data.subscribers
    },
    async getDetail () {
      //获取所有详情
      //获取歌单详情 基本信息
      this.id = this.$route.params.id
      console.log(this.id)
      var res = await _getMusicListDetail(this.id)
      console.log(res)
      // 评论次数
      this.recommendCount = res.data.playlist.commentCount
      //用准备好的构造函数 处理数据
      this.baseInfo = new baseInfoCom(res.data.playlist)
      console.log(this.baseInfo)

      // 根据歌单id获取歌曲列表
      this.musicList = []
      _getAllSong(this.id).then(res => {
        console.log(res)
        let list = res.data.songs
        for (let i in list) {
          this.musicList.push({
            id: list[i].id,
            pic: list[i].al.picUrl,
            name: list[i].name,
            arist: list[i].ar[0].name,
            album: list[i].al.name,
            time: formatDate(new Date(list[i].dt), 'mm:ss')
          })
        }
        console.log(this.musicList)
      })
      // 获取评论
      this.getRecommend()

      // 调用获取收藏者
      this.getCollecton()
    }
  }
}
</script>
<style lang="less" scoped></style>
